<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>携程旅行网 - 酒店预订,机票预订,旅游度假,商旅管理</title>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.3/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <!-- Flatpickr 日期插件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

    <!-- Swiper旧版5.4.5（支持直接new） -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@5.4.5/css/swiper.min.css">
    <script src="https://cdn.jsdelivr.net/npm/swiper@5.4.5/js/swiper.min.js"></script>


</head>


<body>
    <!-- 顶部导航栏 -->
    <header class="ctrip-header">
        <div class="container">
            <div class="header-top">
                <div class="logo">
                    <a href="#">
                        <img src="picture/logo.png" alt="携程旅行网">
                    </a>
                </div>
                <div class="nav-main">
                    <ul>
                        <li><a href="#" class="active"><i class="fas fa-hotel"></i> 酒店</a></li>
                        <li><a href="flight.html"><i class="fas fa-plane"></i> 机票</a></li>
                        <li><a href="#"><i class="fas fa-train"></i> 火车票</a></li>
                        <li><a href="#"><i class="fas fa-ship"></i> 旅游</a></li>
                        <li><a href="#"><i class="fas fa-car"></i> 租车</a></li>
                        <li><a href="#"><i class="fas fa-utensils"></i> 美食</a></li>
                        <li><a href="#"><i class="fas fa-gift"></i> 团购</a></li>
                    </ul>
                </div>
                <div class="user-area">
                    <a href="#" class="login">登录/注册</a>
                    <a href="#" class="app-download">下载携程APP</a>
                </div>
            </div>
        </div>
    </header>





    <section class="search-section">
        <div class="container">
            <div class="search-layout">
                <!-- 左侧搜索表单 -->
                <div class="search-left">
                    <form id="searchForm" class="search-box hotel-search" action="search.html" method="get">
                        <div class="search-item">
                            <label for="city">目的地城市</label>
                            <input type="text" id="city" name="city" placeholder="输入或点击选择城市">
                            <div class="hot-cities">
                                <span class="hot-city">北京</span><span class="hot-city">上海</span><span
                                    class="hot-city">广州</span>
                                <span class="hot-city">深圳</span><span class="hot-city">成都</span><span
                                    class="hot-city">重庆</span>
                                <span class="hot-city">杭州</span><span class="hot-city">西安</span><span
                                    class="hot-city">苏州</span>
                                <span class="hot-city">南京</span><span class="hot-city">武汉</span><span
                                    class="hot-city">长沙</span>
                                <span class="hot-city">青岛</span><span class="hot-city">厦门</span><span
                                    class="hot-city">大连</span>
                                <span class="hot-city">昆明</span><span class="hot-city">三亚</span><span
                                    class="hot-city">哈尔滨</span>
                                <span class="hot-city">天津</span><span class="hot-city">郑州</span>
                            </div>
                        </div>

                        <div class="search-item">
                            <label for="checkin">入住日期</label>
                            <input type="text" id="checkin" name="checkin" class="date-input" placeholder="请选择日期">
                        </div>

                        <div class="search-item">
                            <label for="checkout">离店日期</label>
                            <input type="text" id="checkout" name="checkout" class="date-input" placeholder="请选择日期">
                        </div>

                        <div class="search-item">
                            <label for="stars">酒店等级</label>
                            <select id="stars" name="stars">
                                <option value="">不限</option>
                                <option value="1">⭐</option>
                                <option value="2">⭐⭐</option>
                                <option value="3">⭐⭐⭐</option>
                                <option value="4">⭐⭐⭐⭐</option>
                                <option value="5">⭐⭐⭐⭐⭐</option>
                            </select>
                        </div>

                        <button type="submit" class="search-btn">搜索</button>
                    </form>
                </div>

                <!-- 右侧轮播图 - 完全独立的一块 -->
                <div class="search-right">
                    <div class="swiper-container">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <img src="picture/bejing.jpg" alt="北京" class="slider-image">
                                <div class="slide-info">
                                    <h3>北京</h3>
                                    <p>历史文化之都，感受千年古都的魅力</p>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <img src="picture/shanghai.jpg" alt="上海" class="slider-image">
                                <div class="slide-info">
                                    <h3>上海</h3>
                                    <p>魔都风情，体验现代都市的繁华</p>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <img src="picture/guagnzhou.jpg" alt="广州" class="slider-image">
                                <div class="slide-info">
                                    <h3>广州</h3>
                                    <p>美食天堂，品尝地道粤式美味</p>
                                </div>
                            </div>
                        </div>
                        <!-- 小圆点分页器 -->
                        <div class="swiper-pagination"></div>

                        <!-- 左右箭头 -->
                        <div class="swiper-button-next"></div>
                        <div class="swiper-button-prev"></div>
                    </div>

                    <div class="swiper-pagination"></div>

                </div>
            </div>
        </div>
    </section>

    <script>
        // 初始化日期选择器
        flatpickr("#checkin", {
            minDate: "today",
            dateFormat: "Y-m-d",
            locale: "zh"
        });

        flatpickr("#checkout", {
            minDate: "today",
            dateFormat: "Y-m-d",
            locale: "zh"
        });

        // 热门城市点击填入
        document.querySelectorAll(".hot-city").forEach(city => {
            city.addEventListener("click", () => {
                document.getElementById("city").value = city.textContent;
            });
        });

        // 初始化轮播图
        new Swiper('.swiper-container', {
            loop: true,
            autoplay: {
                delay: 4000,
                disableOnInteraction: false
            },
            pagination: {
                el: '.swiper-pagination',
                clickable: true
            },
            speed: 800
        });
    </script>

    <!-- 主要内容区域 -->
    <main class="container">
        <!-- 促销活动 -->
        <section class="promotion-section">
            <h2 class="section-title">热门活动</h2>
            <div class="promotion-grid">
                <div class="promotion-item big">
                    <img src="picture/bj.png" alt="暑期特惠">
                    <div class="promotion-info">
                        <h3>暑期特惠</h3>
                        <p>酒店5折起</p>
                    </div>
                </div>
                <div class="promotion-item">
                    <img src="picture/zoumo-tejia.jpg" alt="周末特价">
                    <div class="promotion-info">
                        <h3>周末特价</h3>
                        <p>限时抢购</p>
                    </div>
                </div>
                <div class="promotion-item">
                    <img src="picture/xinyonhu.webp" alt="新用户专享">
                    <div class="promotion-info">
                        <h3>新用户专享</h3>
                        <p>首单立减100</p>
                    </div>
                </div>
            </div>
        </section>
        <!-- 轮播图 -->


        <section class="destination-section">
            <h2 class="section-title">热门目的地</h2>
            <div class="destination-grid">
                <a href="beijing.html" class="destination-item">
                    <img src="picture/bjp1.webp" alt="北京">
                    <div class="destination-info">
                        <h3>北京</h3>
                        <p>历史文化之都</p>
                    </div>
                </a>
                <a href="shanghai.html" class="destination-item">
                    <img src="picture/sh4.jpg" alt="上海">
                    <div class="destination-info">
                        <h3>上海</h3>
                        <p>魔都风情</p>
                    </div>
                </a>
                <a href="guangzhou.html" class="destination-item">
                    <img src="picture/gzta.webp" alt="广州">
                    <div class="destination-info">
                        <h3>广州</h3>
                        <p>美食天堂</p>
                    </div>
                </a>
                <a href="chengdu.html" class="destination-item">
                    <img src="picture/cd.webp" alt="成都">
                    <div class="destination-info">
                        <h3>成都</h3>
                        <p>熊猫之乡</p>
                    </div>
                </a>
            </div>
        </section>

        <!-- 特价酒店 -->
        <section class="hotel-section">
            <h2 class="section-title">特价酒店</h2>
            <div class="hotel-grid">
                <div class="hotel-card">
                    <img src="picture/bj2.jpg" alt="酒店图片">
                    <div class="hotel-info">
                        <h3>北京王府井大接酒店</h3>
                        <div class="rating">
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <span>4.8分</span>
                        </div>
                        <div class="location">
                            <i class="fas fa-map-marker-alt"></i>
                            <span>王府井大街，步行至天安门10分钟</span>
                        </div>
                        <div class="price">
                            <span class="original-price">¥1200</span>
                            <span class="current-price">¥699</span>
                            <span class="discount">5.8折</span>
                        </div>
                    </div>
                </div>
                <div class="hotel-card">
                    <img src="picture/shp2.jpg" alt="酒店图片">
                    <div class="hotel-info">
                        <h3>上海外滩悦榕庄</h3>
                        <div class="rating">
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <span>4.9分</span>
                        </div>
                        <div class="location">
                            <i class="fas fa-map-marker-alt"></i>
                            <span>外滩，黄浦江景房</span>
                        </div>
                        <div class="price">
                            <span class="original-price">¥1800</span>
                            <span class="current-price">¥1299</span>
                            <span class="discount">7.2折</span>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- 页脚 -->
    <footer class="ctrip-footer">
        <div class="container">
            <div class="footer-links">
                <div class="link-group">
                    <h4>关于携程</h4>
                    <ul>
                        <li><a href="#">关于我们</a></li>
                        <li><a href="#">企业荣誉</a></li>
                        <li><a href="#">联系我们</a></li>
                        <li><a href="#">招聘信息</a></li>
                    </ul>
                </div>
                <div class="link-group">
                    <h4>旅游资讯</h4>
                    <ul>
                        <li><a href="#">旅游攻略</a></li>
                        <li><a href="#">旅游资讯</a></li>
                        <li><a href="#">国际租车</a></li>
                        <li><a href="#">旅游指南</a></li>
                    </ul>
                </div>
                <div class="link-group">
                    <h4>消费者服务</h4>
                    <ul>
                        <li><a href="#">会员中心</a></li>
                        <li><a href="#">优惠券</a></li>
                        <li><a href="#">发票服务</a></li>
                        <li><a href="#">帮助中心</a></li>
                    </ul>
                </div>
                <div class="link-group">
                    <h4>商务合作</h4>
                    <ul>
                        <li><a href="#">加盟合作</a></li>
                        <li><a href="#">广告服务</a></li>
                        <li><a href="#">企业商旅</a></li>
                        <li><a href="#">供应商入驻</a></li>
                    </ul>
                </div>
            </div>
            <div class="footer-bottom">
                <p>© 2025 携程旅行网 | 沪ICP备08021041号</p>
                <div class="social-links">
                    <a href="#"><i class="fab fa-weixin"></i></a>
                    <a href="#"><i class="fab fa-weibo"></i></a>
                    <a href="#"><i class="fab fa-qq"></i></a>
                </div>
            </div>
        </div>
    </footer>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var cityInput = document.getElementById('city');
            var hotCities = document.querySelector('.hot-cities');

            // 当输入框获得焦点时，显示热门城市列表
            cityInput.addEventListener('focus', function () {
                hotCities.style.display = 'block';
            });

            // 当输入框失去焦点时，延迟隐藏热门城市列表，确保点击事件生效
            cityInput.addEventListener('blur', function () {
                setTimeout(function () {
                    hotCities.style.display = 'none';
                }, 200);
            });

            // 点击热门城市时，将城市名称填入输入框
            hotCities.addEventListener('click', function (e) {
                if (e.target && e.target.classList.contains('hot-city')) {
                    cityInput.value = e.target.textContent;
                    hotCities.style.display = 'none';
                }
            });
        });
        document.addEventListener('DOMContentLoaded', function () {
            // 日期选择器初始化
            const dateInputs = document.querySelectorAll('.date-input');
            const [checkInInput, checkOutInput] = dateInputs;

            const checkOutPicker = flatpickr(checkOutInput, {
                locale: 'zh',
                dateFormat: 'Y-m-d',
                minDate: new Date().fp_incr(1)
            });

            const checkInPicker = flatpickr(checkInInput, {
                locale: 'zh',
                dateFormat: 'Y-m-d',
                minDate: 'today',
                onChange: function (selectedDates, dateStr) {
                    checkOutPicker.set('minDate', dateStr);
                    // 自动设置离店日期为入住日期+1天
                    const nextDay = new Date(selectedDates[0]);
                    nextDay.setDate(nextDay.getDate() + 1);
                    checkOutPicker.setDate(nextDay);
                }
            });

            // 搜索标签切换
            const searchTabs = document.querySelectorAll('.search-tabs li');
            const searchBoxes = document.querySelectorAll('.search-box');

            searchTabs.forEach((tab, index) => {
                tab.addEventListener('click', function () {
                    // 移除所有active类
                    searchTabs.forEach(t => t.classList.remove('active'));
                    searchBoxes.forEach(b => b.style.display = 'none');

                    // 添加active类到当前标签
                    this.classList.add('active');

                    // 显示对应的搜索框
                    if (searchBoxes[index]) {
                        searchBoxes[index].style.display = 'block';
                    }
                });
            });

            // 默认显示第一个搜索框
            searchBoxes.forEach((box, index) => {
                box.style.display = index === 0 ? 'block' : 'none';
            });
        });
    </script>
    <!-- 引入Swiper旧版5.4.5的JS -->
    <script src="https://cdn.jsdelivr.net/npm/swiper@5.4.5/js/swiper.min.js"></script>

    <script>
        var swiper = new Swiper('.swiper-container', {
            loop: true, // 无限循环
            autoplay: {
                delay: 4000, // 4秒切换
                disableOnInteraction: false // 用户操作后仍然继续自动播放
            },
            speed: 800, // 切换速度（毫秒）
            pagination: {
                el: '.swiper-pagination',
                clickable: true
            },
            navigation: {
                nextEl: '.swiper-button-next', // 下一张
                prevEl: '.swiper-button-prev'  // 上一张
            }
        });
    </script>
</body>

</html>